<script setup lang="ts">
// Vue3的函数
import { ref, onMounted, reactive } from 'vue';

// 统计数据的接口
import { totalInterviewCategory, totalExamCategory } from '../api/request'

// npm install echarts@5.1.2
import * as echarts from 'echarts'

// 定义echartDom变量
const pieChart = ref<HTMLElement | null>(null);
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

// 定义返回随机颜色的函数
const getRandomColor = () => {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  return `rgba(${r},${g},${b},.5)`
}

// 挂载后执行的回调函数（程序挂载后执行钩子）
onMounted(async () => {
  // 饼状图
  if (pieChart.value) {
    // 初始化一个图形的实例
    const chart = echarts.init(pieChart.value);
    // 记录考试试卷数据的对象（echartjs的配置）
    const option = reactive({
      // 设置标题
      title: {
        text: "统计试卷数量（套）",
        textStyle: {
          fontSize: 20,
          color: '#333',
          fontFamily: '微软雅黑',
        },
      },
      // 提示
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right'
      },
      // 定义形状以及划分比例
      series: [
        {
          type: 'pie',//形状
          data: [ // 数据要按照 value 和 name 这些属性进行赋值
            // { value: 335, name: '直接访问' },
            // { value: 310, name: '邮件营销' },
            // { value: 234, name: '联盟广告' },
            // { value: 135, name: '视频广告' },
            // { value: 148, name: '搜索引擎' },
          ],
          emphasis: {// 设置阴影
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
      ],
    });
    // chart.setOption(option);

    // 请求数据...
    await totalExamCategory().then(
      content => {
        let { code, result } = content;
        // console.log(result);
        if (code == 200) {
          // 整合数据
          let arr = result.map((item: any) => {
            // 此处的value 和 name 是因为echartjs中的配置所需
            return {
              value: item.num,
              name: item.text + `(${item.num})`
            }
          })
          // 给echartjs的配置选项赋值 （因为这个option采用reactive函数创建的，所以数据变化，页面就跟随变化）
          option.series[0].data = arr;
        }
      }
    )

    // 拿到数据之后，渲染饼状图
    chart.setOption(option);
  }

  // 柱状图
  if (chartContainer.value) {
    // 初始化一个图形的实例
    chartInstance = echarts.init(chartContainer.value);
    // 配置图形的参数
    const option2 = reactive({
      // 设置标题
      title: {
        text: "统计面试题数量（道）",
        textStyle: {
          fontSize: 20,
          color: '#333',
          fontFamily: 'Source Han Sans CN, Source Han Sans CN-Medium',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},

      // 分类列表
      xAxis: {
        type: 'category',
        data: [
          // 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
        ]
      },
      yAxis: {
        type: 'value',
      },
      // 数据列表
      series: [
        {
          data: [
            // 120, 200, 150, 80, 70, 110, 130
          ],
          type: 'bar',
          itemStyle: {
            color: () => {
              // 随机颜色函数
              return getRandomColor();
            }
          }
        }
      ]
    });

    // 请求数据...
    await totalInterviewCategory().then(
      content => {
        let { code, result } = content;
        // console.log(result);
        if (code == 200) {
          let arr1 = result.map((item: any) => {
            return item.category_text + `(${item.num})`
          })
          let arr2 = result.map((item: any) => {
            return item.num
          })
          // 赋值
          option2.xAxis.data = arr1
          option2.series[0].data = arr2
        }
      }
    )
    // 渲染柱状住
    chartInstance?.setOption(option2);
  }

})

</script>

<template>
  <div style="width: 100%; min-width: 1200px; display: flex;">
    <el-card style="width: 50%;">
      <!-- 饼状图 -->
      <div ref="pieChart" style="width: 100%; height: 600px;"></div>
    </el-card>

    <el-card style="width: 50%;">
      <!-- 柱状图 -->
      <div ref="chartContainer" style="width:100%; height: 600px;"></div>
    </el-card>
  </div>
</template>
